<template>
  <div class="waterMonitorPage">
    <div class="waterLeft">
      <div class="header headerBlue">汛情总览</div>
      <div class="waterOverview clearfix">
        <div v-for="item of overviewList" :key="item.id" class="overviewItem">
          <div class="name">{{ item.name }}</div>
          <div class="value">
            {{ item.value }}<span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <div class="header headerBlue">全市降水量</div>
      <div class="rainTable">
        <dv-scroll-ranking-board
          :config="rainConfig"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="header headerBlue">主要河流水位预警</div>
      <div class="riverTable">
        <dv-scroll-board
          :config="riverConfig"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
    <div class="waterMiddle"></div>
    <div class="waterRight">
      <div class="header headerBlue">全年供水量统计</div>
      <div class="waterSupply">
        <div class="left">
          <div
            v-for="item of supplyList"
            :key="item.id"
            class="leftItem"
          >
            <div class="name" :class="'name'+item.id">{{ item.name }}</div>
            <div class="value">{{ item.value }}<span>{{ item.unit }}</span></div>
          </div>
        </div>
        <div class="right">
          <div class="top">地表水蓄水工程</div>
          <div class="bottom">
            <dv-water-level-pond :config="waterConfig" style="width: 100%; height: 100%" />
          </div>
        </div>
      </div>
      <div class="header headerBlue">城市自来水供应</div>
      <div class="tapWater">
        <div class="left">
          <div class="leftItem">
            <div class="name">原水供水量</div>
            <div class="value">3544<span>mm</span></div>
          </div>
          <div class="leftItem">
            <div class="name">水厂供水量</div>
            <div class="value">1244<span>mm</span></div>
          </div>
        </div>
        <div class="right">
          <div class="name">用水户用水</div>
          <div class="rightItem">
            <span class="name">生活</span>
            <span class="value">1072</span>
            <span class="unit">万㎡</span>
          </div>
          <div class="rightItem">
            <span class="name">生产</span>
            <span class="value">1072</span>
            <span class="unit">万㎡</span>
          </div>
        </div>
      </div>
      <div class="header headerBlue">中大型水库蓄水情况</div>
      <div class="reservoir">
        <div class="left">
          <div class="item">
            <span class="name">大型水库</span>
            <span class="value">5<span class="unit">座</span></span>
          </div>
          <div class="item">
            <span class="name">中型水库</span>
            <span class="value">16<span class="unit">座</span></span>
          </div>
        </div>
        <div class="right">
          <dv-active-ring-chart :config="reservoirConfig" style="width:100%;height:100%" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      overviewList: [
        { id: 1, name: "全省降雨量", value: "1244", unit: "mm" },
        { id: 2, name: "水库拦蓄水量", value: "1072", unit: "万㎡" },
        { id: 3, name: "水闸排水量", value: "2418", unit: "万㎡" },
        { id: 4, name: "泵站排水量", value: "2100", unit: "万㎡" },
      ],
      rainConfig: {
        rowNum: 6,
        unit: "mm",
        data: [
          { name: "延庆", value: 900 },
          { name: "门头沟", value: 879 },
          { name: "房山", value: 855 },
          { name: "密云", value: 830 },
          { name: "平谷", value: 780 },
          { name: "怀柔", value: 700 },
          { name: "朝阳区", value: 650 },
          { name: "海淀区", value: 623 },
          { name: "东城区", value: 562 },
          { name: "西城区", value: 531 },
          { name: "顺义区", value: 496 },
          { name: "昌平区", value: 480 },
          { name: "大兴区", value: 463 },
          { name: "丰台区", value: 425 },
          { name: "石景山区", value: 400 },
        ],
      },
      riverConfig: {
        header: [
          "<span style='color:#6C9BFF'>名称</span>",
          "<span style='color:#6C9BFF'>当前水位</span>",
          "<span style='color:#6C9BFF'>警戒水位(米)</span>",
          "<span style='color:#6C9BFF'>实时流量(米³/秒)</span>"
        ],
        data: [
          ["清河", "5.78", "6", "355"],
          ["拒马河", "98.68", "104", "401"],
          ["永定河", "9.68", "10", "500"],
          ["北运河", "19.44", "21", "230"],
          ["潮白河", "30.29", "33", "167"],
          ["天堂河", "20.8", "30", "152"],
        ],
        rowNum: 4,
        columnWidth: [80,90],
        align:['center','center','center','center'],
        headerBGC: 'none',
        oddRowBGC: 'none',
        evenRowBGC: '#0f2d53',
      },
      supplyList: [
        { id: 1, name: "地表水", value: "4892", unit: "万㎡" },
        { id: 2, name: "地下水", value: "934", unit: "万㎡" },
        { id: 3, name: "其他水源", value: "104", unit: "万㎡" },
      ],
      waterConfig: {
        data: [66]
      },
      reservoirConfig: {
        data: [
          { name: '大型水库', value: 8256 },
          { name: '中型水库', value: 6256 },
        ],
        radius: 45,
        activeRadius: 50,
        digitalFlopStyle: {
          fontSize: 10
        },
        digitalFlopUnit: '万㎡',
        showOriginValue: true,
        color: ['#54e484', '#2d9bfc']
      }
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//waterMonitor.scss";
</style>
